<!--/* 图片加载 */-->
<img
  th:fragment="lazyLoadImg(src,alt,class,random,parma)"
  th:src="${theme.config.loading.img.preload}"
  th:attr="onerror='this.src='+${'`'+theme.config.loading.img.err+'`'}"
  th:data-lazy-src="${(#strings.isEmpty(src) && theme.config.loading.img.random_enable && random)  ? (theme.config.loading.img.random_link + parma)  : src}"
  th:alt="${alt}"
  th:class="${class}"
>

<!--/* 文章列表  */-->
<ul
  xmlns:th="https://www.thymeleaf.org"
  th:fragment="list(data,layout)"
  th:class="${'essay ' + layout}"
  th:with="noData = ${not #lists.isEmpty(data)}"
>
  <th:block th:if="${noData}">
    <li class="item card" th:each="post : ${data}">
      <a th:if="${not #strings.isEmpty(post.spec.cover) || theme.config.loading.img.random_enable }" th:href="${post.status.permalink}" th:title="${post.spec.title}" th:class="'cover' + ${post.spec.pinned ? ' top' : ''}">
        <img th:replace="~{::lazyLoadImg(${post.spec.cover},${post.spec.title},'img',true,${param_prefix +'v=' + #dates.format(post.spec.publishTime, 'yyyyMMddhhmmss')})}"/>
      </a>

      <div class="info">
        <a class="title" th:href="${post.status.permalink}" th:title="${post.spec.title}" th:text="${post.spec.title}"></a>
        <div class="data">
          <div class="row">
          <span class="wp comment">
              <i class="fa-solid fa-comments"></i>
              <span th:text="'评论 '+${post.stats.comment}"></span>
          </span>
            <span class="wp upvote">
              <i class="fa-solid fa-thumbs-up"></i>
              <span th:text="'点赞 '+${post.stats.upvote}"></span>
          </span>
            <span class="wp visit">
              <i class="fa-solid fa-eye"></i>
              <span th:text="'预览 '+${post.stats.visit}"></span>
          </span>
          </div>

          <div class="row">
          <span class="wp publishTime">
            <i class="far fa-calendar-alt fa-bolt-auto"></i>
            <time th:datetime="${post.spec.publishTime}" th:text="'发布于 '+${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}"></time>
          </span>
            <span class="wp category" th:if="${!#arrays.isEmpty(post.categories)}">
            <i class="fas fa-inbox"></i>
            <span class="cys">
              <th:block th:each="cy : ${post.categories}">
                <a class="link" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>
              </th:block>
            </span>
          </span>
          </div>
        </div>
        <div th:if="${layout == 'list'}" class="excerpt" th:text="${post.spec.excerpt.raw}"></div>
      </div>
    </li>
  </th:block>

  <th:block th:unless="${noData}" th:insert="~{:: emptyData(true)}"></th:block>
</ul>


<!--/* 暂无数据  */-->
<div xmlns:th="https://www.thymeleaf.org" th:fragment="emptyData(showCard)"
     th:class="'empty'+${showCard ? ' card' : ''}">
  <svg class="empty-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="120" height="120">
    <path d="M483.322 136.98l-2.08-116.502A19.278 19.278 0 0 1 499.266 0h2.512c12.439.104 22.574 10.063 22.574 22.43l4.048 114.446a22.702 22.702 0 0 1-22.606 22.43c-10.136-1.952-22.479-10.079-22.479-22.326h.016zm165.034 16.943c-8.751 8.695-23.27 5.847-32.045 0a22.638 22.638 0 0 1 0-31.702L700.8 44.156a23.006 23.006 0 0 1 31.933 0c8.76 8.703 8.76 23.118 0 28.958l-84.377 80.793zm-287.215 0l-84.369-80.921c-8.767-5.824-8.767-20.135 0-28.95a23.006 23.006 0 0 1 31.917 0l84.497 78.058a22.606 22.606 0 0 1 0 31.7c-8.775 5.944-23.278 8.8-32.045.113zm488.686 679.445v9.84l-8.871 3.663-306.238 125.43-5.76 2.64V645l9.904 17.15 60.283 105.063a15.206 15.206 0 0 0 13.03 7.327 14.879 14.879 0 0 0 7.952-2.055L850.17 658.047V833.36h-.328l-.016.008zm-671.486 13.503l-9.44-3.655V654.824l.448.456 236.396 117.086a23.86 23.86 0 0 0 7.96 2.047 17.15 17.15 0 0 0 14.158-7.759l59.715-104.615 9.92-17.158V977.46l-13.152-5.28-306.005-125.317zm-21.998-415.308l4.72-8.8 323.411 162.85 4.84 2.616-2.76 4.696-77.57 138.932-2.655 4.24-4.72-2.056L77.15 572.663l5.888-10.4 73.298-130.708h.008zM484.93 304.646l12.56-4.12V552.41h-6.336l-1.608-1.024-295.063-147.868 9.92-3.663 280.527-95.208zm328.716 95.784l14.175 4.695-291.487 146.708-7.375 3.663V303.054l5.303 1.6 279.392 95.792v-.016zM935.82 562.256l7.367 13.503-320.293 159.306-4.847 2.056-2.52-4.12-77.113-139.508-2.528-4.688 4.704-2.64L858.722 426.98l2.192 3.664 74.922 131.62h-.016zm49.1 12.463L884.863 397.334v-1.016a16.047 16.047 0 0 0-6.775-7.327l-359.05-133.797-1.04-.56-1.031-.464a14.967 14.967 0 0 0-7.968-2.176 13.71 13.71 0 0 0-7.84 2.176l-1.023.464-1.144.56-357.881 134.253a25.649 25.649 0 0 0-9.455 8.815l-100.04 178.52a19.414 19.414 0 0 0 8.88 24.958l81.249 40.053 8.43 4.231v207.15a18.91 18.91 0 0 0 10.48 17.151l358.45 151.42c2.99 1.487 6.223 2.159 9.438 2.159 3.248 0 6.48-.672 9.455-2.16l356.498-151.987h1.04a18.022 18.022 0 0 0 11.99-17.158V644.417l7.84-4.128 78.593-40.157 3.232-1.503 3.008-2.048a15.807 15.807 0 0 0 4.72-21.87v.008z"></path>
  </svg>
  <span>暂无数据~</span>
</div>


<!--/* 移动端侧边  */-->
<th:block th:fragment="side">
  <!--/* 侧边菜单 */-->
  <div class="side-bar">
    <img th:replace="~{views/components:: lazyLoadImg(${contributor.avatar},${contributor.displayName},'avatar',false,'')}"/>

    <div class="site-data">
      <a class="item" title="文章" href="/archives">
        <h2 class="title">文章</h2>
        <span class="num" th:text="${stats.post}"></span>
      </a>
      <a class="item" href="/categories" title="分类">
        <h2 class="title">分类</h2>
        <span class="num" th:text="${stats.category}"></span>
      </a>
      <a class="item" title="评论" href="javascript:">
        <h2 class="title">点赞</h2>
        <span class="num" th:text="${stats.upvote}"></span>
      </a>
    </div>
    <hr/>

    <menu class="bar" th:with="menuItems = ${menuFinder.getPrimary().menuItems}">
      <th:block th:each="menuItem : ${menuItems}" th:with="isChildren = ${#lists.isEmpty(menuItem.children)} ">
        <li th:if="${isChildren}" class="bar-item">
          <a
            class="link"
            th:href="@{${menuItem.status.href}}"
            th:target="${menuItem.spec.target?.value}"
            th:with="icon = ${#annotations.getOrDefault(menuItem, 'icon','')}"
          >
            <i th:if="${!#strings.isEmpty(icon)}" th:class="${icon}"></i>
            <span class="name" th:text="${menuItem.status.displayName}"></span>
          </a>
        </li>
        <!--/* 二级*/-->
        <li th:unless="${isChildren}" class="bar-item child">
          <a
            class="link"
            href="javascript:void(0);"
            th:with="icon = ${#annotations.getOrDefault(menuItem, 'icon','')}"
          >
            <i th:if="${!#strings.isEmpty(icon)}" th:class="${icon}"></i>
            <span class="name" th:text="${menuItem.status.displayName}"></span>
            <i class="fas fa-chevron-left"></i>
          </a>

          <ul class="bar-children animate__animated animate__fadeIn">
            <li th:each="children : ${menuItem.children}" class="bar-children--item">
              <a
                class="bar-children--link"
                th:href="@{${children.status.href}}"
                th:target="${children.spec.target?.value}"
                th:with="icon = ${#annotations.getOrDefault(children, 'icon','')}"
              >
                <!--              <i th:if="${!#strings.isEmpty(icon)}" th:class="${icon}"></i>-->
                <span class="name" th:text="${children.status.displayName}"></span>
              </a>
            </li>
          </ul>

        </li>
      </th:block>
    </menu>
  </div>

  <!--/* 侧边按钮 */-->
  <div class="side-btn">
    <button class="button switch-model" th:if="${theme.config.style.mode == 'user'}" onclick="MainApp.useTheme.toggleMode()" type="button" title="浅色和深色模式转换">
      <i class="fas fa-adjust"></i>
    </button>

    <button class="button back-top" onclick="MainApp.useCommon.backTop()" type="button" title="回到顶部">
      <i class="fa-solid fa-up"></i>
    </button>
  </div>
</th:block>
